<template>
	<view class="buy-box" :class="{ high: isHigh }">
		<view class="buy-box-container" :style="{ 'margin-bottom': bottom + 'rpx' }">
			<view class="buy-box-title">{{ title }}</view>
			<view class="buy-box-item-container">
				<view class="buy-box-item">
					<text>商品总价</text>
					<text>¥{{ totalPriceTrue }}</text>
				</view>
			</view>
			<view class="buy-box-item-container" v-if="canTicket">
				<view class="buy-box-item" @tap="openTicketPop">
					<text>使用代金券</text>
					<text v-show="currentTicket < 0">{{ ticketsCount }}</text>
					<text v-show="currentTicket > -1">-¥{{ ticketCut }}</text>
				</view>
			</view>
			<view class="buy-box-item-container" :class="{ hidden: !isCanPoint }">
				<view class="buy-box-item">
					<text>积分抵扣</text>
					<view class="mutiple-line">
						<text class="mutiple-line-1">{{ pointText }}</text>
						<text>{{ pointCut }}</text>
					</view>
				</view>
			</view>
			<view class="buy-box-item-container bold-line">
				<view class="buy-box-item">
					<text>支付总额</text>
					<text>¥{{ payPrice }}</text>
				</view>
			</view>
		</view>

		<uni-popup ref="buyBoxTicketPopup" type="bottom" :custom="true" @change="innerBuyBoxPop">
			<view class="ticket-Container">
				<view class="ticket-operation">
					<text @tap="closeInnerPop">关闭</text>
					<text :class="{ disabled: currentTicket < 0 }" @tap="currentTicket > -1 && chooseTicket()">确定</text>
				</view>
				<scroll-view scroll-y="true" class="ticket-list">
					<view class="ticket-item" @tap="tapTicket(index)" :class="{ active: currentTicket == index }" v-for="(item, index) in tickets" :key="index">
						<view class="ticket-item-top">
							<text class="ticket-item-top-price">¥{{ item.ticketPrice.toFixed(2) / 100 }}</text>
							<view class="ticket-item-top-content">
								<text class="content-title">{{ item.ticketName }}</text>
								<!-- <text class="content-desc">有效期{{ item.endDate }}</text> -->
							</view>
						</view>
						<view class="ticket-item-bottom">
							<text class="content">有效期{{ item.endDate }}</text>
							<!-- <text class="content">仅限购买{{ item.goodsName }}使用</text> -->
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
export default {
	name: 'yxylBuyBox',
	components: { uniPopup },
	data() {
		return {
			isHigh: false,
			currentTicket: -1
		};
	},
	props: {
		title: {
			//弹窗title
			type: String,
			default() {
				return '订单支付';
			}
		},
		bottom: {
			//距离底部位置
			type: Number,
			default: 0
		},
		totalPrice: {
			//商品总价
			type: Number,
			default: 0.0
		},
		canTicket: {
			type: Boolean,
			default: true
		},
		tickets: {
			//代金券列表
			type: Array,
			default() {
				return [];
			}
		},
		canPoint: {
			type: Boolean,
			default: true
		},
		point: {
			//总积分
			type: Number,
			default: 0
		},
		pointRate: {
			//积分比例
			type: Number,
			default: 100
		}
	},
	computed: {
		ticketsCount: function() {
			return this.tickets.length + '张可用';
		},
		pointText: function() {
			return `可用${this.point}积分`;
		},
		pointCut: function() {
			return `-¥${this.point / this.pointRate}`;
		},
		totalPriceTrue: function() {
			return (this.totalPrice / 100).toFixed(2);
		},
		payPrice: function() {
			var point_Cut = 0;
			if (this.isCanPoint) {
				point_Cut = this.point / this.pointRate;
			} else {
				point_Cut = 0;
			}
			var res = ((this.totalPrice / 100).toFixed(2) - point_Cut - this.ticketCut).toFixed(2);
			if (res <= 0) {
				res = 0.01;
			}
			return res;
		},
		ticketCut: function() {
			var res = this.tickets[this.currentTicket];
			if (res) {
				return (res.ticketPrice / 100).toFixed(2);
			}
			return 0;
		},
		isCanPoint: function() {
			var res = this.tickets[this.currentTicket];
			if (res) {
				return this.canPoint && res.isCanPoint;
			} else {
				return this.canPoint;
			}
		}
	},
	methods: {
		openTicketPop() {
			this.$refs.buyBoxTicketPopup.open();
		},
		innerBuyBoxPop(e) {
			if (e.show) {
				this.isHigh = true;
			} else {
				this.isHigh = false;
			}
			this.$emit('ticketChange', e.show);
			if (!e.show) {
				this.$emit('readyPay', { ticketSN: this.tickets[this.currentTicket] && this.tickets[this.currentTicket].ticketSN, canPoint: this.isCanPoint });
			}
		},
		closeInnerPop() {
			this.$refs.buyBoxTicketPopup.close();
		},
		chooseTicket() {
			this.$refs.buyBoxTicketPopup.close();
		},
		tapTicket(index) {
			if (this.currentTicket != index) {
				this.currentTicket = index;
			} else {
				this.currentTicket = -1;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.buy-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	&.high {
		height: 70vh;
	}
}

.buy-box-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	.buy-box-title {
		width: 100%;
		font-size: 22px;
		padding: 15px 0;
		color: #808080;
		border-bottom: 1px solid #c0c0c0;
		text-align: center;
	}
	.buy-box-item-container {
		border-bottom: 1px solid #c0c0c0;
		width: 100%;
		.buy-box-item {
			display: flex;
			width: 80%;
			margin: 0 auto;
			justify-content: space-between;
			align-items: center;
			padding: 10px 0;
			color: #555555;
			font-size: 18px;
			.mutiple-line {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				font-size: 14px;
				.mutiple-line-1 {
					color: #808080;
					font-size: 12px;
				}
			}
		}
	}
	.bold-line {
		border-top: 2px solid #808080;
	}
}
.ticket-Container {
	background: #fff;
	height: 70vh;
	width: 100%;
	.ticket-operation {
		display: flex;
		width: 90%;
		margin: 0 auto;
		height: 60rpx;
		padding: 10rpx 0;
		display: flex;
		justify-content: space-between;
		font-size: 16px;
	}
	.ticket-list {
		width: 90%;
		margin: 0 auto;
		height: calc(70vh - 100rpx);
		.ticket-item {
			width: 95%;
			margin: 0 auto;
			border-radius: 15px;
			background: #f0ad4e;
			height: 200rpx;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: column;
			&.active {
				border: 2px solid #4cd964;
			}
			.ticket-item-top {
				display: flex;
				flex-basis: 70%;
				flex-grow: 0;
				flex-shrink: 0;
				color: #ffffff;

				.ticket-item-top-price {
					flex-basis: 30%;
					flex-grow: 0;
					flex-shrink: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26px;
				}
				.ticket-item-top-content {
					flex-basis: 70%;
					flex-grow: 0;
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.content-title {
						font-size: 24px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
					.content-desc {
						font-size: 14px;
						color: #eeeeee;
					}
				}
			}
			.ticket-item-bottom {
				border-top: 1px solid #dddddd;
				flex-basis: 30%;
				flex-grow: 0;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				.content {
					width: 90%;
					margin: 0 auto;
					font-size: 14px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					color: #ffffff;
				}
			}
		}
	}
}
</style>
